<template>
  <view class="page-container">
    <scroll-view scroll-y="true" class="scroll-view">
      <!-- 轮播图区域，包含标题 -->
      <view class="banner-area">
        <text class="banner-title">泉州风光</text>
        <view class="swiper-container">
          <swiper
            class="swiper"
            autoplay="true"
            interval="3000"
            duration="500"
            circular="true"
            indicator-dots="true"
            indicator-color="rgba(255,255,255,0.5)"
            indicator-active-color="#ffffff"
          >
            <swiper-item v-for="(img, index) in swiperImages" :key="index">
              <image 
                :src="img" 
                class="swiper-img" 
                mode="aspectFill" 
                alt="泉州风光图片"
              />
            </swiper-item>
          </swiper>
        </view>
      </view>

      <!-- 其他内容保持不变 -->
      <view class="city-intro">
		  <text class="banner-title">泉州介绍</text>
        <rich-text :nodes="cityIntroNodes"></rich-text>
      </view>

      <view class="progress-box">
        <text class="progress-text">探索进度：{{ progress }}%</text>
        <progress :percent="progress" show-info="true" stroke-width="6" />
      </view>

      <view class="picker-box">
        <text class="picker-label">选择城市：</text>
        <picker
          mode="region"
          @change="onRegionChange"
          :value="region"
          custom-item="请选择"
        >
          <view class="picker-display">
            {{ region[0] }}-{{ region[1] }}-{{ region[2] }}
          </view>
        </picker>
      </view>

      <view class="preference-box">
        <view class="radio-group-box">
			<text class="banner-title">出行设置</text>
          <text class="preference-label">出行方式：</text>
          <radio-group @change="onTravelModeChange">
            <label class="radio-label" v-for="(mode, index) in travelModes" :key="index">
              <radio :value="mode.value" :checked="mode.value === travelMode" />{{ mode.text }}
            </label>
          </radio-group>
        </view>

        <view class="switch-box">
          <text class="preference-label">显示推荐景点：</text>
          <switch :checked="showRecommend" @change="onShowRecommendChange" />
        </view>

        <view class="slider-box">
          <text class="preference-label">探索半径(km)：</text>
          <slider
            :value="radius"
            @change="onRadiusChange"
            min="1"
            max="20"
            show-value="true"
          />
        </view>
      </view>

      <view class="video-box">
        <text class="video-label">城市宣传视频：</text>
        <video
          :src="videoSrc"
          controls="true"
          :autoplay="false"
          :loop="false"
          class="video"
          poster="/static/video-cover.jpg"
          alt="泉州宣传视频"
        />
      </view>
	  
	  <view class="audio-box">
	    <text class="audio-title">泉州背景音乐</text>
	    
	    <view class="audio-controls">
	      <!-- 播放/暂停按钮 -->
	      <button 
	        class="play-btn" 
	        type="primary" 
	        @click="togglePlay"
	      >
	        {{ audioPlaying ? '暂停' : '播放' }}
	      </button>
	      
	      <!-- 进度条区域 -->
	      <view class="progress-area">
	        <!-- 进度条 -->
	        <slider 
	          :value="progressPercent" 
	          @change="onProgressChange"
	          min="0" 
	          max="100" 
	          step="1"
	          activeColor="#007AFF"
	          backgroundColor="#eee"
	          class="audio-slider"
	        />
	        
	        <!-- 时间显示 -->
	        <view class="time-display">
	          <text class="current-time">{{ formatTime(currentTime) }}</text>
	          <text class="total-time">{{ formatTime(duration) }}</text>
	        </view>
	      </view>
	    </view>
	    
	    <text class="audio-desc">曲目：《泉州南音》- 泉州传统乐团演奏</text>
	  </view>
	  
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperImages: [
        '/static/city1.jpg',
        '/static/city2.jpg',
        '/static/city3.jpg'
      ],
      cityIntroNodes: [
        {
          name: 'p',
          attrs: { style: 'color: #333; font-size: 16px; line-height: 1.6;' },
          children: [
            { type: 'text', text: '泉州是一座历史文化名城，' },
            {
              name: 'span',
              attrs: { style: 'font-weight: bold; color: #007AFF;' },
              children: [{ type: 'text', text: '海上丝绸之路起点' }]
            },
            {
              type: 'text',
              text: '，拥有众多文化遗产和自然景观。这里的开元寺、清净寺、老君岩等景点见证了多元文化的交融，展现了独特的城市魅力。'
            },
          ],
        },
      ],
      progress: 60,
      region: ['福建省', '泉州市', '丰泽区'],
      travelModes: [
        { text: '公交', value: 'bus' },
        { text: '自驾', value: 'selfDriving' },
        { text: '步行', value: 'walking' },
      ],
      travelMode: 'bus',
      showRecommend: true,
      radius: 10,
      videoSrc: '/static/cityVideo.mp4',
	  
	  audioContext: null,      // 音频上下文
	      audioPlaying: false,     // 播放状态
	      currentTime: 0,          // 当前播放时间（秒）
	      duration: 0,             // 总时长（秒）
	      progressPercent: 0  
	  
    };
  },
  
  onLoad() {
    // ...原有其他初始化（省略）
    // 初始化音频上下文
    this.audioContext = uni.createInnerAudioContext();
    this.audioContext.src = '/static/city-music.mp3'; // 音频文件路径
    
    // 监听音频可以播放（获取总时长）
    this.audioContext.onCanplay(() => {
      this.duration = this.audioContext.duration || 0;
    });
    
    // 监听播放进度更新
    this.audioContext.onTimeUpdate(() => {
      this.currentTime = this.audioContext.currentTime || 0;
      this.progressPercent = this.duration ? Math.floor((this.currentTime / this.duration) * 100) : 0;
    });
    
    // 监听播放结束
    this.audioContext.onEnded(() => {
      this.audioPlaying = false;
      this.currentTime = 0;
      this.progressPercent = 0;
    });
  },
  
  methods: {
    onRegionChange(e) {
      this.region = e.detail.value;
      uni.showToast({
        title: `已选择：${this.region[0]}-${this.region[1]}-${this.region[2]}`,
        icon: 'none',
        duration: 2000
      });
    },
    onTravelModeChange(e) {
      this.travelMode = e.detail.value;
    },
    onShowRecommendChange(e) {
      this.showRecommend = e.detail.value;
    },
    onRadiusChange(e) {
      this.radius = e.detail.value;
    },
	
	togglePlay() {
	    if (this.audioPlaying) {
	      this.audioContext.pause();
	    } else {
	      this.audioContext.play();
	    }
	    this.audioPlaying = !this.audioPlaying;
	  },
	  
	  // 进度条拖动调整进度
	  onProgressChange(e) {
	    const percent = e.detail.value;
	    this.progressPercent = percent;
	    const seekTime = (percent / 100) * this.duration;
	    this.audioContext.seek(seekTime);
	  },
	  
	  // 格式化时间（秒 -> 分:秒）
	  formatTime(seconds) {
	    if (!seconds) return '00:00';
	    const min = Math.floor(seconds / 60);
	    const sec = Math.floor(seconds % 60);
	    return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
	  },
	
  },
  
  onUnload() {
    // ...原有其他卸载逻辑（省略）
    if (this.audioContext) {
      this.audioContext.destroy();
    }
  }
  
};
</script>

<style scoped>
.page-container {
  max-width: 750px;
  margin: 0 auto;
  background-color: #f5f5f5;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.scroll-view {
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

/* 轮播图区域（包含标题） */
.banner-area {
  margin-bottom: 20px;
}

/* 泉州风光标题样式 */
.banner-title {
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

/* 轮播图容器 */
.swiper-container {
  width: 100%;
  padding-top: 56.25%; /* 16:9比例 */
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.swiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.swiper-img {
  width: 100%;
  height: 100%;
}

/* 响应式调整 */
@media (max-width: 750px) {
  .page-container {
    max-width: 100%;
    box-shadow: none;
  }
  
  .banner-title {
    font-size: 18px;
  }
}

/* 其他样式保持不变 */
.city-intro, .progress-box, .picker-box, .preference-box, .video-box {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.progress-text, .picker-label, .preference-label, .video-label {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
  display: block;
}

.picker-display {
  border: 1px solid #eee;
  padding: 8px 12px;
  border-radius: 4px;
  display: inline-block;
  min-width: 200px;
  color: #666;
}

.radio-label {
  margin-right: 15px;
  color: #666;
}

.video {
  width: 100%;
  height: 200px;
  border-radius: 4px;
}

.audio-box {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.audio-title {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.audio-controls {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}

.play-btn {
  width: 80px;
  height: 40px;
  line-height: 40px;
  padding: 0;
}

.progress-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.audio-slider {
  width: 100%;
  height: 6px;
}

.time-display {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}

.audio-desc {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

</style>